<template>
  <view class="container">
    <view 
      v-for="(item, idx) in appointmentList" 
      :key="idx" 
      class="reserve-item"
    >
     <uni-card :is-shadow="false" :is-border="false" :is-hover="false" :is-link="false" >
      <view class="row">
        <text class="title">{{ item.warehouse?.warehouseName || '未知仓库' }}</text>
        <text class="status" :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</text>
      </view>
      <view class="row">
        <text class="time">{{ item.visitDate + " " + item.visitTime }}</text>
      </view>
      <view class="row">
        <uni-icons type="location" size="16" color="#bbb" />
        <text class="address">{{ item.warehouse?.address || '地址未知' }}</text>
        <text class="detail-link" @click="goDetail(item.warehouse.warehouseId)">查看详情</text>
      </view>
     </uni-card>
    </view>
    
     
    <view v-if="loading" class="loading-tip">
      加载中...
    </view>
    <view v-else-if="!appointmentList.length" class="empty-tip">
      暂无预约记录
    </view>
  </view>
</template>

<script>
import { API } from '@/utils/api.js'

export default {
  name: "myReserve",
  data() {
    return {
      appointmentList: [],
      loading: false
    }
  },
  
  onShow() {
    this.loadAppointments()
  },
  
  methods: {
    // 加载预约列表
    async loadAppointments() {
      this.loading = true
      
      try {        
        // 获取预约列表
        const res = await API.appointment.getList({})
        
        if (res.rows) {
          this.appointmentList = res.rows
        } else {
          this.appointmentList = []
        }
        
      } catch (error) {
        console.error('获取预约列表失败:', error)
        uni.showToast({
          title: '获取预约列表失败',
          icon: 'none'
        })
        this.appointmentList = []
      } finally {
        this.loading = false
      }
    },
    
    // 格式化日期时间
    formatDateTime(date, time) {
      if (!date) return '时间未知'
      
      const dateObj = new Date(date)
      const year = dateObj.getFullYear()
      const month = String(dateObj.getMonth() + 1).padStart(2, '0')
      const day = String(dateObj.getDate()).padStart(2, '0')
      
      return `${year}年${month}月${day}日 ${time || ''}`
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: '待确认',
        1: '已确认',
        2: '已取消',
        3: '驳回'
      }
      return statusMap[status] || '未知状态'
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      const classMap = {
        0: 'pending',
        1: 'confirmed',
        2: 'cancelled',
        3: 'completed'
      }
      return classMap[status] || 'pending'
    },
    
    // 跳转到详情页
    goDetail(item) {
			if (!item) {
				uni.showToast({ title: '缺少仓库ID', icon: 'none' });
				return;
			}
			uni.navigateTo({ url: '/pages/warehouse/warehouseDetail?id=' + encodeURIComponent(item) })
    }
  }
}
</script>

<style scoped>
.container {
  background: #ffffff;
  min-height: 100vh;
  padding: 24rpx 16rpx 100rpx 16rpx;
}
.reserve-item {
  background: #ffffff;
  border-radius: 16rpx;
  /* margin-bottom: 24rpx;
  padding: 24rpx 20rpx; */
  box-shadow: var(--shadow-light);
}
.row {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}
.title {
  font-size: 32rpx;
  font-weight: 600;
  color: #222;
  flex: 1;
}
.status {
  font-size: 26rpx;
  padding: 2rpx 16rpx;
  border-radius: 20rpx;
  margin-left: 12rpx;
}
.status.pending {
  background: #fff7e6;
  color: #faad14;
}
.status.confirmed {
  background: #e6fffb;
  color: #13c2c2;
}
.status.cancelled {
  background: #fff1f0;
  color: #f5222d;
}
.status.completed {
  background: #f6ffed;
  color: #52c41a;
}
.time {
  font-size: 28rpx;
  color: #666;
}
.address {
  font-size: 26rpx;
  color: #888;
  margin-left: 8rpx;
  flex: 1;
}
.info-row {
  margin-top: 16rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid #f0f0f0;
}
.info-text {
  font-size: 24rpx;
  color: #999;
  margin-right: 24rpx;
}
.detail-link {
  color: var(--primary-color);
  font-size: 26rpx;
  margin-left: 16rpx;
  text-decoration: underline;
}
.loading-tip {
  text-align: center;
  color: #999;
  font-size: 28rpx;
  margin-top: 80rpx;
}
.empty-tip {
  text-align: center;
  color: #bbb;
  font-size: 28rpx;
  margin-top: 80rpx;
}
</style>